<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/common/head.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>步骤管理</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="${resource }/css/bootstrap.css" />
		<script src="${resource }/js/jquery-2.1.1.min.js"></script>
		<script src="${resource }/js/jquery.form.js"></script>
		<script src="${resource }/js/bootstrap.min.js?v=3.4.0"></script>
	</head>

	<body>
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-sm-4">
				<h2>流程管理</h2>
				<ol class="breadcrumb">
					<li>
						<a href="index.html">主页</a>
					</li>
					<li>
						<strong>添加步骤</strong>
					</li>
				</ol>
			</div>
		</div>
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-md-12">
				<!-- 用户列表--bootstrap高级表格使用 -->
				<div class="panel panel-default">
					<div class="panel-heading">
						添加步骤
					</div>
					<div class="panel-body">
						<!--table-responsive响应式表格，会自动添加滚动条-->
						<div class="table-responsive">
							<a href="show.do?id=${workflow.id}"><input class="btn btn-success" type="button" value="返回上一步"></a>
							<form action="addsave.do" method="post" id="inputForm">
								<table class="table">
									<tr>
										<td>步骤</td>
										<td><input name="stepName" id="stepName" type="text" placeholder="请输入步骤名称"></td>
									</tr>
									<tr>
										<td>详情</td>
										<td><textarea name="stepInfo" id="stepInfo"></textarea></td>
									</tr>
									<tr>
										<td>所属流程</td>
										<td><input type="text" value="${workflow.workflowName}" readonly="readonly">
											<input type="hidden" value="${workflow.id}" name="workflowId" id="workflowId">
										</td>
										
									</tr>
									<tr>
										<td>上一步序号</td>
										<td><select name="stepNum" id="stepNum">
											<option value="0">无</option>
											<c:forEach items="${list}" var="step">
												<option value="${step.stepNum}">${step.stepName}</option>
											</c:forEach>
										</select></td>
									</tr>
									<tr>
										<td>审核人</td>
										<td>
											<select name="userId" id="userId">
												<option value="">无</option>
												<c:forEach items="${ulist}" var="user">
													<option value="${user.id}">${user.userName}</option>
												</c:forEach>
											</select>
										</td>
									</tr>

								</table>
								<input type="submit" value="完成" class="btn btn-success" onclick="return okedit()">								
							</form>
							<button id="nexts" class="btn btn-success" onclick="nextstep()" style="position:fixed;left: 90px;top: 462px;">继续添加</button>
						</div>
					</div>
				</div>
				<!--表格结束 -->
			</div>
		</div>
		<script>
			function nextstep() {
				var stepName=document.getElementById("stepName").value;
				var stepInfo=document.getElementById("stepInfo").value;
				var workflowId=document.getElementById("workflowId").value;
				var stepNum=document.getElementById("stepNum").value;
				var userId=document.getElementById("userId").value;	
				$.ajax({
					type: 'POST',     // 设置表单提交方式
			        dataType: 'json',
			        data:{"stepName":stepName,"stepInfo":stepInfo,"workflowId":workflowId,"stepNum":stepNum,"userId":userId},
			        url: "addsave.do",    // 设置表单提交URL,默认为表单Form上action的路径
			        success: function(responseText, statusText, xhr, $form){    // 成功后的回调函数
			            if (responseText!="0") {
			               
			                window.location.href="addstep.do?workfowid="+responseText;
			                /* 成功后的操作 */
			            } else {
			                alert("操作失败!");    // 成功访问地址，并成功返回数据，由于不符合业务逻辑的失败
			            }
			        },  
			        error: function(xhr, status, err) {            
			            alert("请求失败!");    // 访问地址失败，或发生异常没有正常返回
			        }
				});
			}
			function okedit() {
				var stepName = document.getElementById("stepName").value;
				if(stepName != null && stepName != "") {
					return true;
				} else {
					alert("名称不能为空哦！");
					return false;
				}
			}
			//添加操作，提交
			 $(function() {
				 // 1.基本参数设置 
			    var options = { 						
			        type: 'POST',     // 设置表单提交方式
			        dataType: 'json', 
			        url: "addsave.do",    // 设置表单提交URL,默认为表单Form上action的路径
			        success: function(responseText, statusText, xhr, $form){    // 成功后的回调函数
			            if (responseText!="0") {
			                
			                window.location.href="show.do?id="+responseText;
			                /* 成功后的操作 */
			            } else {
			                alert("操作失败!");    // 成功访问地址，并成功返回数据，由于不符合业务逻辑的失败
			            }
			        },  
			        error: function(xhr, status, err) {            
			            alert("请求失败!");    // 访问地址失败，或发生异常没有正常返回
			        },
			        clearForm: true,    // 成功提交后，清除表单填写内容
			        resetForm: true    // 成功提交后，重置表单填写内容
			    }; 
			    // 2.绑定ajaxSubmit()
			    $("#inputForm").submit(function(){     // 提交表单的id
			        $(this).ajaxSubmit(options); 
			        return false;   //防止表单自动提交
			    });
			});
			
		</script>
	</body>

</html>